﻿<!DOCTYPE html>
<html ng-app="gridApp">
<head>

    <meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <title>Database Management System</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet" />    
    <link href="../css/loading-bar.css" rel="stylesheet" />
    <!--<link href="css/font-awesome.min.css" rel="stylesheet" />-->       
    <link href="../css/toaster.css" rel="stylesheet" type="text/css" />
    <link href="../css/jquery.handsontable.full.css" rel="stylesheet" type="text/css" />
	<style>
            .nav, .pagination, .carousel, .panel-title a { cursor: pointer; }
        </style>
</head>
<body ng-controller="gridController">
    
<table class="table table-bordered table-hover">
	<thead>
		<tr>
		  <th ng-repeat="col in header">
			<ul class="nav nav-pills nav-stacked">  
			  <li class="dropdown">
				<a class="dropdown-toggle" data-toggle="dropdown" href>
					<span>{{col.header}}</span>
				   <span class="glyphicon glyphicon-sort-by-alphabet" ng-if="col.sort=='+'" style="float:right"></span>
				   <span class="glyphicon glyphicon-sort-by-alphabet-alt" ng-if="col.sort=='-'" style="float:right"></span>
				</a>	
				<ul class="dropdown-menu">
				  <li data-ng-click="setSort($index,'+')"><a href>Sort Ascending <span class="glyphicon glyphicon-sort-by-alphabet" style="float:right"></span></a></li>
				  <li data-ng-click="setSort($index,'-')"><a href>Sort Descending <span class="glyphicon glyphicon-sort-by-alphabet-alt" style="float:right"></span></a></li>      
				  <li data-ng-click="setSort($index,null)"><a href>Clear Sort</a></li>
				</ul>
			  </li>
			  
			</ul>		  
		  </th>		  
		</tr>
	</thead>
	<tbody ng-repeat="entry in data">
		<tr>
		  <td>{{entry.id}}</td>
		  <td>{{entry.type}}</td>
		  <td>{{entry.status}}</td>
		  <td>{{entry.comment}}</td>
		  <td>{{entry.timeStamp}}</td>
		</tr>
	</tbody>	
</table> 

	<script src="../js/angular.min.js" type="text/javascript"></script>
    <script src="../js/angular-route.min.js" type="text/javascript"></script>
    <script src="../js/angular-local-storage.min.js"></script>
    <script src="../js/loading-bar.min.js"></script>
    <script src="../js/ui-bootstrap-tpls-0.11.2.min.js" type="text/javascript"></script>    
    <script src="../js/jquery-2.1.1.min.js" type="text/javascript"></script>   
    <script src="../js/toaster.js" type="text/javascript"></script>	

<script src="dataGrid.js"></script>
</body>